<!DOCTYPE html>
<html>
<head>
  <title>Inertial Frames S and S'</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background-color: #f0f0f0;
    }
    canvas {
      border: 1px solid #ccc;
      background-color: white;
    }
  </style>
</head>
<body>
<canvas id="physicsCanvas" width="800" height="400"></canvas>
<script>
  const canvas = document.getElementById('physicsCanvas');
  const ctx = canvas.getContext('2d');

  // Clear canvas
  ctx.fillStyle = 'white';
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  // Style settings
  ctx.strokeStyle = 'black';
  ctx.fillStyle = 'black';
  ctx.lineWidth = 2;

  // Helper function to draw an arrowhead
  function drawArrowhead(ctx, toX, toY, angle) {
    const headLength = 15;
    ctx.beginPath();
    ctx.moveTo(toX, toY);
    ctx.lineTo(toX - headLength * Math.cos(angle - Math.PI / 6), toY - headLength * Math.sin(angle - Math.PI / 6));
    ctx.moveTo(toX, toY);
    ctx.lineTo(toX - headLength * Math.cos(angle + Math.PI / 6), toY - headLength * Math.sin(angle + Math.PI / 6));
    ctx.stroke();
  }

  // --- Main Drawing ---

  // Coordinates
  const centerY = 220;
  const xAxisY1 = centerY - 1.5;
  const xAxisY2 = centerY + 1.5;
  const xAxisStartX = 50;
  const xAxisEndX = 750;
  
  const oX = 200; // S frame origin x
  const oPrimeX = 250; // S' frame origin x
  
  const yAxisStartY = 50;
  const yAxisEndY = 350;

  // Draw X-axes (double line)
  ctx.beginPath();
  ctx.moveTo(xAxisStartX, xAxisY1);
  ctx.lineTo(xAxisEndX, xAxisY1);
  ctx.stroke();
  ctx.beginPath();
  ctx.moveTo(xAxisStartX, xAxisY2);
  ctx.lineTo(xAxisEndX, xAxisY2);
  ctx.stroke();
  drawArrowhead(ctx, xAxisEndX, centerY, 0);

  // Draw Y-axis (S frame)
  ctx.beginPath();
  ctx.moveTo(oX, yAxisStartY);
  ctx.lineTo(oX, yAxisEndY);
  ctx.stroke();
  drawArrowhead(ctx, oX, yAxisStartY, -Math.PI / 2);
  
  // Draw Y'-axis (S' frame)
  ctx.beginPath();
  ctx.moveTo(oPrimeX, yAxisStartY);
  ctx.lineTo(oPrimeX, yAxisEndY);
  ctx.stroke();
  drawArrowhead(ctx, oPrimeX, yAxisStartY, -Math.PI / 2);

  // --- Labels ---

  // Frame labels (S系, S'系)
  ctx.font = '32px KaiTi';
  ctx.fillStyle = 'black';
  ctx.fillText('S系', 130, 150);
  ctx.fillText("S'系", 350, 150);

  // Axis and Origin labels
  ctx.font = 'italic 24px Times New Roman';
  // S frame
  ctx.fillText('O', oX + 5, centerY + 30);
  ctx.fillText('y', oX - 40, yAxisStartY + 25);
  // S' frame
  ctx.fillText("O'", oPrimeX + 5, centerY + 30);
  ctx.fillText("y'", oX + 15, yAxisStartY + 25);
  
  // X and X' labels
  ctx.fillText("x'", xAxisEndX - 50, centerY - 20);
  ctx.fillText('x', xAxisEndX - 50, centerY + 35);

  // Particle P
  ctx.beginPath();
  ctx.arc(oPrimeX, centerY, 5, 0, 2 * Math.PI);
  ctx.fill();
  ctx.fillText('P', oPrimeX - 45, centerY);

  // Force vector F'_x, a
  const forceStartX = oPrimeX + 5;
  const forceEndX = forceStartX + 120;
  ctx.beginPath();
  ctx.moveTo(forceStartX, centerY);
  ctx.lineTo(forceEndX, centerY);
  ctx.stroke();
  drawArrowhead(ctx, forceEndX, centerY, 0);
  
  // Force label F'_x, a
  const labelX = forceEndX + 20;
  const labelY = centerY - 20;
  ctx.font = 'italic 24px Times New Roman';
  ctx.fillText("F", labelX, labelY);
  ctx.fillText("'", labelX + 13, labelY - 7);
  ctx.font = 'italic 16px Times New Roman';
  ctx.fillText("x", labelX + 17, labelY + 5);
  ctx.font = 'italic 24px Times New Roman';
  ctx.fillText(", a", labelX + 28, labelY);
  
  // Velocity vector v
  const veloStartX = 600;
  const veloEndX = 680;
  const veloY = centerY - 100;
  ctx.font = 'italic 24px Times New Roman';
  ctx.fillText('v', veloStartX - 25, veloY + 8);
  ctx.beginPath();
  ctx.moveTo(veloStartX, veloY);
  ctx.lineTo(veloEndX, veloY);
  ctx.stroke();
  drawArrowhead(ctx, veloEndX, veloY, 0);
  
</script>
</body>
</html>